﻿	<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
	<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
	
	<script type="text/javascript">
		var newExpenseTypeCallback = function () 
		{
			$('#dlg-expenseType form').form('clear');
			$('#dlg-expenseType #fm-expenseType #name').focus();
		}
		var saveExpenseType = function() 
		{
			saveModel('#dg-expenseType', '#dlg-expenseType', '#fm-expenseType', 
				function() 
				{
					$('#toolbar-expenseType #btn-add').tooltip('hide');
					loadGridData ('#dg-expenseType', '<c:url value='/expenseType/getAllType.html' />')
				}
			);
		}
		
		var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true;}
            if ($('#dg-expenseType').datagrid('validateRow', editIndex)){
                var ed = $('#dg-expenseType').datagrid('getEditor', {index:editIndex,field:'name'});
                if(ed)
                {
	                var productname = $(ed.target).val();
	                $('#dg-expenseType').datagrid('getRows')[editIndex]['name'] = productname;
	                $('#dg-expenseType').datagrid('endEdit', editIndex);
                }
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
        function onClickRow(index){
            if (editIndex != index){
                if (endEditing()){
                    $('#dg-expenseType').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                    editIndex = index;
                } else {
                    $('#dg-expenseType').datagrid('selectRow', editIndex);
                }
            }
        }
        function append(){
            if (endEditing()){
                $('#dg-expenseType').datagrid('appendRow',{name:''});
                editIndex = $('#dg-expenseType').datagrid('getRows').length-1;
                $('#dg-expenseType').datagrid('selectRow', editIndex)
                        .datagrid('beginEdit', editIndex);
            }
        }
        function removeit(){
			if($('#dg-expenseType').datagrid('getSelected')) 
			{
				var rowIndex = $('#dg-expenseType').datagrid('getRowIndex', $('#dg-expenseType').datagrid('getSelected'));
				$('#dg-expenseType').datagrid('deleteRow', rowIndex);
				return;
			}
            if (editIndex == undefined){return;}
            $('#dg-expenseType').datagrid('cancelEdit', editIndex)
                    .datagrid('deleteRow', editIndex);
            editIndex = undefined;
        }
        function accept(){
            if (endEditing()){
                $('#dg-expenseType').datagrid('acceptChanges');
				
				var allRows = $('#dg-expenseType').datagrid('getRows');
				console.log(allRows);
				
				var expenseTypeList = "";
	            for(var i = 0; i < allRows.length; i++) 
	            {
	            	var expenseType = "";
	    	        var item = allRows[i];
	    	        if(item.id == undefined)
	    	        {
	    	        	expenseType += (" " +","+item.name + ","+item.accountingMode);
	    	        }
	    	        else 
	    	        {
		    	        expenseType += (item.id +","+item.name + ","+item.accountingMode);
	    	        }
	    	        expenseTypeList += expenseType + ";"
	            }
				
				ajaxPostRequest('<c:url value='/expenseType/saveExpenseType.html' />', {expenseTypes:expenseTypeList}, function(){loadGridData ('#dg-expenseType', '<c:url value='/expenseType/getAllType.html' />');});
            }
        }
        function reject(){
            $('#dg-expenseType').datagrid('rejectChanges');
            editIndex = undefined;
        }
        function getChanges(){
            var insertedRows = $('#dg-expenseType').datagrid('getChanges', 'inserted');
            var updatedRows = $('#dg-expenseType').datagrid('getChanges', 'updated');
            var deletedRows = $('#dg-expenseType').datagrid('getChanges', 'deleted');
            console.log(insertedRows.length+' rows are inserted!');
            console.log(updatedRows.length+' rows are updated!');
            console.log(deletedRows.length+' rows are deleted!');
        }
		function reloadExpenseType() 
		{
			reject();
			loadGridData ('#dg-expenseType', '<c:url value='/expenseType/getAllType.html' />');
		}
		function formatter_accountingMode(value,row)
		{
			if('IN_COME' == value) 
			{
				return '收入';
			}
			if('OUT_LAY' == value) 
			{
				return '支出';
			}
			return '';
		}
	</script>
	
	<table id="dg-expenseType" title="账单类型" class="easyui-datagrid"
		style="" url="<c:url value='/expenseType/getAllType.html' />"
		toolbar="#toolbar-expenseType2" pagination="false" rownumbers="true" 
		 singleSelect="true" checkOnSelect="true" selectOnCheck="false"
		data-options="fit:true, fitColumns:true, sortName:'accountingMode', sortOrder:'desc', onClickRow:onClickRow">
		<thead>
			<tr>
				<!--<th data-options="field:'ck',checkbox:true"></th>-->
				<th field="id" data-options="hidden:true"><spring:message code="id" /></th>
				<th field="accountingMode" width="30" data-options="
                       sortable:true,
                       formatter: formatter_accountingMode,
                       editor:{
                           type:'combobox',
                           options:{
                               valueField:'value',
                               textField:'label',
							panelHeight: 'auto',
                               data:[{label:'收入',value:'IN_COME'},{label:'支出',value:'OUT_LAY'}],
                               required:true
                           }
                       }">模式</th>
				<th field="name" width="50" data-options="sortable:false, editor:{type:'validatebox', options:{required:true}}"><spring:message code="name" /></th>
			</tr>
		</thead>
	</table>
	
	<div id="toolbar-expenseType" style="display:none">
		<a href="javascript:void(0)" class="easyui-linkbutton easyui-tooltip" id="btn-add" title="<spring:message code="newType" />" data-options="
				iconCls:'icon-add',
				plain:true,
				content: function(){
					return $('#dlg-expenseType');
				},
				hideEvent: 'none',
                showEvent: 'click',
                onShow: function(){
                    var t = $(this);
                    t.tooltip('tip').unbind().bind('mouseenter', function(){
                        t.tooltip('show');
                    }).bind('mouseleave', function(){
                        t.tooltip('hide');
                    });
					t.tooltip('arrow').css('left', 20);
					t.tooltip('tip').css('left', $(this).offset().left);
					setSaveOrEditUrl('<c:url value='/expenseType/newExpenseType.html' />');
					newExpenseTypeCallback();
                }"></a> 
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editModel('#dg-expenseType', '#dlg-expenseType', '<spring:message code="editType" />', '#fm-expenseType', '<c:url value='/expenseType/updateExpenseType.html' />', newExpenseTypeCallback)" title="<spring:message code="editType" />"></a> 
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="destroyMultipleModel('#dg-expenseType', '账单类型', '<c:url value='/expenseType/delExpenseType.html' />', function() {loadGridData ('#dg-expenseType', '<c:url value='/expenseType/getAllType.html' />')})" title="<spring:message code="removeType" />"></a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-reload" plain="true" onclick="loadGridData ('#dg-expenseType', '<c:url value='/expenseType/getAllType.html' />')" title="<spring:message code="refresh" />"></a>
	</div>
	<div id="toolbar-expenseType2" style="height:auto">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()" title="<spring:message code="newType" />"></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()" title="<spring:message code="removeType" />"></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()" title="<spring:message code="save" />"></a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload', plain:true" onclick="reloadExpenseType()" title="<spring:message code="refresh" />"></a>
    </div>

	<div id="dlg-expenseType" class="easyui-dialog"
		style="width: 250px; height: 150px; padding: 0px" closed="true"
		buttons="#dlg-buttons-expenseType">
		<form id="fm-expenseType" class="fm" method="post" novalidate>
			<div class="fitem divHidden">
				<input id="expenseTypeId" name="id" value="0">
			</div>
			<div class="fitem">
				<label>账单类型:</label> 
				<input id="name" name="name" class="easyui-validatebox" required="true" style="width:150px" 
				validType="myRemote['<c:url value='/expenseType/checkExist.html' />', 'name', '#expenseTypeId']" 
				onkeyup="if(event.keyCode == 13) {$('#save-expenseType').click()}" />
			</div>
		</form>
	</div>
	<div id="dlg-buttons-expenseType">
		<a id="save-expenseType" href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-ok" onclick="saveExpenseType()"><spring:message code="save" /></a> 
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#toolbar-expenseType #btn-add').tooltip('hide');"><spring:message code="cancel" /></a>
	</div>
